<template>
  <div>
    <span style="position: relative">
      <input ref="input" class="my-input" @input="txt" />
      <i :class="`iconfont icon-${msg}`" @click="qc"> </i>
    </span>
  </div>
</template>

<script>
export default {
  name: "MyInput",
  props: {
    msg: String,
    value: String,
  },
  data() {
    return {
      test: "",
    };
  },
  methods: {
    qc() {
      this.$emit("click", this.test);
    },
    txt(event) {
      this.test = event.target.value;
    },
  },
};
</script>

<style scoped>
.my-input {
  width: 200px;
  height: 40px;
  outline: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px;
  font-size: 14px;
}

.delete-icon {
  position: absolute;
  right: 10px;
  color: #999;
  cursor: pointer;
  top: 50%;
  margin-top: -4%;
}
</style>